<template>
  <div>
    <!--顾客列表-->
    <el-table
      ref="refClerkTable"
      v-loading="listLoading"
      :data="list"
      :height="500"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row>
      <el-table-column fixed prop="cname" label="顾客姓名" align="center" width="100"></el-table-column>
      <el-table-column fixed label="性别" align="center" width="60">
        <template slot-scope="{ row }">
          <div v-if="row.sex === 2">其他</div>
          <div v-if="row.sex === 1">女</div>
          <div v-if="row.sex === 0">男</div>
        </template>
      </el-table-column>
      <el-table-column fixed label="生日类别" align="center" width="80">
        <template slot-scope="{ row }">
          <div v-if="row.birthdayType === 2">农历生日</div>
          <div v-if="row.birthdayType === 1">公历生日</div>
        </template>
      </el-table-column>
      <el-table-column fixed prop="solar" label="出生日期(公历)" align="center" width="140"></el-table-column>
      <el-table-column fixed prop="lunarStr" label="出生日期(农历)" align="center" width="140"></el-table-column>
      <el-table-column label="信任等级" align="center" width="80" class-name="small-padding fixed-width">
        <template slot-scope="{ row }">
          <div v-if="row.trust2 === 3">已信任</div>
          <div v-if="row.trust2 === 2">已破冰</div>
          <div v-if="row.trust2 === 1">未破冰</div>
          <div v-if="row.trust2 === 0">未设置</div>
        </template>
      </el-table-column>
      <el-table-column label="消费能力" align="center" width="80" class-name="small-padding fixed-width">
        <template slot-scope="{ row }">
          <div v-if="row.bg2 === 3">没钱</div>
          <div v-if="row.bg2 === 2">普通</div>
          <div v-if="row.bg2 === 1">有钱</div>
          <div v-if="row.bg2 === 0">超有钱</div>
        </template>
      </el-table-column>
      <el-table-column label="消费等级" align="center" width="80" class-name="small-padding fixed-width">
        <template slot-scope="{ row }">
          <div v-if="row.grade === 4">S级</div>
          <div v-if="row.grade === 3">A级</div>
          <div v-if="row.grade === 2">B级</div>
          <div v-if="row.grade === 1">C级</div>
          <div v-if="row.grade === 0">未定</div>
        </template>
      </el-table-column>
      <el-table-column label="运营" align="center" width="80">
        <template slot-scope="{ row }">
          <span v-if="row.dengji === 3">放弃</span>
          <span v-if="row.dengji === 2" style="color: #f56c6c">失速</span>
          <span v-if="row.dengji === 1" style="color: #e6a23c">预警</span>
          <span v-if="row.dengji === 0" style="color: #67c23a">正常</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center" width="120" show-overflow-tooltip>
        <template slot-scope="{ row }">
          {{ row.createTime ? row.createTime.substring(0, 10) : '' }}
        </template>
      </el-table-column>
      <el-table-column prop="kname" label="所属管家" align="center" width="160"></el-table-column>
      <el-table-column prop="sname" label="所属门店" align="center" width="240" show-overflow-tooltip></el-table-column>
      <el-table-column prop="ccode" label="顾客编号" align="center" width="180"></el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"></pagination>
  </div>
</template>

<script>
import * as apiSts from '@/api/_com_';
import { getClerkBirthdayTodayPageBySalonId } from '@/api/txs';
import Pagination from '@/components/Pagination';
import '@/utils/datefmt';
import { MessageBox } from 'element-ui';
import { mapGetters } from 'vuex';

export default {
  name: 'ActivityList',
  components: {
    Pagination,
  },
  data() {
    return {
      list: [], // 页面 table 数据
      listLoading: false, // 页面数据加载中?
      total: 0,
      listQuery: { page: 1, limit: 10 },
    };
  },
  computed: {
    ...mapGetters(['name', 'id', 'deptId', 'openId']),
  },
  methods: {
    getList: async function () {
      if (!this.openId) {
        // 不属于任何门店的用户(通常是系统管理员)
        return;
      }
      if (this.listLoading) {
        return;
      }
      this.listLoading = true;
      this.list.splice(0, this.list.length);
      const errAlertMsg = '查询顾客列表失败';
      const params = { pageNumber: this.listQuery.page, pageSize: this.listQuery.limit, sid: this.openId };
      await getClerkBirthdayTodayPageBySalonId(params)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          const ret = res.data.data;
          if (ret) {
            if (ret.records && ret.records.length > 0) {
              this.list.push(...ret.records);
            }
            this.total = ret.total;
          }
        })
        .catch(err => {
          console.log('getClerkBirthdayTodayPageBySalonId', err);
          MessageBox.alert(errAlertMsg);
        })
        .finally(() => {
          this.listLoading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/assets/css/scrollbar.scss';
</style>
